<template>
	<div>
		<router-link tag="div" to='/' class="header-abs" v-show="showAbs">
			<div class="iconfont header-abs-back">&#xe625;</div>
		</router-link>
		<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
			<router-link to="/">
        <div class="iconfont header-fixed-back">&#xe625;</div>
      </router-link>
			景点详情
		</div>
	</div>
</template>
<script>
export default {
	name:'DetailHeader',
	data(){
		return{
			showAbs:true,
			opacityStyle:{
				opacity:0				
			}
		}
	},
	methods:{
		handleScroll(){
			const top=document.documentElement.scrollTop
			if(top>60){
				let opacity=top/140
				opacity=opacity>1 ? 1 :opacity
				this.opacityStyle={
					opacity
				}
				this.showAbs=false
			}else{
				this.showAbs=true
			}
		}
	},
	activated(){
		window.addEventListener('scroll',this.handleScroll)
	},
	deactivated(){
		window.addEventListener('scroll',this.handleScroll)
	}
}
</script>
<style lang='stylus' scoped>
	@import '~styles/varibles.styl'
	.header-abs
		position absolute
		top .2rem
		left .2rem
		height .5rem
		width .5rem
		text-align center
		line-height .5rem
		background rgba(0,0,0,.6)
		border-radius .4rem
		.header-abs-back
			color #fff
			font-size .4rem
	.header-fixed
		z-index:2
		position fixed
		left 0
		top 0
		right 0
		height $headerHeight
		line-height $headerHeight
		text-align center
		color #fff
		background $bgColor 
		font-size .34rem
		.header-fixed-back
			position absolute
			top 0
			left 0
			width:.64rem 
			text-align center
			font-size:.5rem
			color #fff
</style>
